<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<canvas id="canvas" width="600" height="600"></canvas>
	</body>
	<script type="text/javascript">
		let canvas = document.getElementById('canvas')
		let ctx = canvas.getContext('2d')
		// console.log(ctx)
		let img = new Image()
		img.src = 'img/timg.jpg'
		img.onload = ()=>{
			ctx.drawImage(img,10,10,img.width/4,img.height/4)
			ctx.font = '32px 微软雅黑'
			ctx.strokeStyle='#fff'
			ctx.strokeText('vuedata',img.width/4-32*4,img.height/4-10)
			
			let img1 = new Image()
			img1.src = 'img/sun.svg'
			img1.onload=()=>{
				console.log(img1.width,img1.height)
				ctx.drawImage(img1,10,10,img1.width,img1.height)
			}
		}
		
	</script>
</html>
